<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>列表</title>
	</head>
	<body>
		<!-- 有序列表 -->
		<h2>把大象放冰箱一共分为几步？</h2>
		<ol>
			<li>把冰箱门打开</li>
			<li>把大象塞进去</li>
			<li>把冰箱门关上</li>
		</ol>

		<hr />

		<!-- 无序列表 -->
		<h2>下面是一些水果：</h2>
		<ul>
			<li>苹果</li>
			<li>香蕉</li>
			<li>橙子</li>
			<li>
				<span>西瓜</span>
				<ul>
					<li>西瓜 1</li>
					<li>西瓜 2</li>
					<li>西瓜 3</li>
				</ul>
			</li>
		</ul>

		<hr />

		<!-- 自定义列表 -->
		<h2>HTML5 新特性：</h2>
		<dl>
			<dt>HTML5 语义化</dt>
			<dd>HTML5 语义化是指通过标签对网页内容进行语义化的过程，使网页内容结构化、更容易被搜索引擎理解和抓取。</dd>
			<dd>
				例如：使用 header 标签定义网页的头部，nav 标签定义导航菜单，section 标签定义网页的章节，article
				标签定义文章内容等。
			</dd>
			<dt>HTML5 多媒体</dt>
			<dd>HTML5 多媒体是指通过标签对网页内容进行多媒体的处理，使网页内容具有更丰富的表现力。</dd>
			<dt>HTML5 绘画</dt>
			<dd>HTML5 绘画是指通过标签对网页内容进行绘画的处理，使网页内容具有更炫酷的视觉效果。</dd>
		</dl>
	</body>
</html>
